<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./font_3948788_29w1kfi8wk8/iconfont.css">
    <script src="./jQuery.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="cont">
        <input type="text" placeholder="搜索天气" class="ipt"><button id="search">点击搜索</button>
        <div class="list"></div>
    </div>
</body>
<script>
    $('#search').on('click', function () {
        $('.ipt').val()
        $.ajax({
            type: 'get',
            url: 'https://v0.yiketianqi.com/free/week',
            data: {
                appid: '67922426',
                appsecret: 'mzLUWEy8',
                city: $('.ipt').val()
            },
            success(res) {
                let newData = res.data
                str = ''
                newData.forEach(item => {
                    if (res.city == $('.ipt').val()) {
                        // let data = `
                        // <h2>${item.wea}</h2>
                        // <p>${item.date}</p>
                        // <p class='iconfont icon-${item.wea_img? item.wea_img:''}'></p>
                        // `
                        str += `
                            <h2>${item.wea}</h2>
                            <p>${item.date}</p>
                            <p class='iconfont icon-${item.wea_img ? item.wea_img : ''}'></p>
                        `
                    }
                });
                $('.list').html(str)
            }
        })
    })
</script>

</html>